import React from 'react';
import { useState, useEffect, useLayoutEffect } from 'react'

// useEffect
// 执行时机: 会在组件渲染到页面后, 或者组件dom 已经挂载到页面dom 树后执行
// useEffect 特点: 是一个异步执行函数, 所以页面中的执行顺序是先渲染的是 韩湘子
// 然后useEffect 触发, 再修改成蓝采和

// useEffectLayout
// 执行时机: 会在组件渲染之前执行,
// 特点: 是一个同步函数, 执行完 useLayoutEffect ,在去渲染页面
// 一般很少使用, 因为如果useLayoutEffect中的逻辑执行时间比较耗时, 则会导致阻塞dom的渲染

const Father = () => {
    const [username, setusername] = useState('韩湘子')

    useLayoutEffect(() => {
        for (let index = 0; index < 10000000; index++) {

        }
        setusername('蓝采和')
    }, [])
    return (
        <div>
            <p>username:{username}</p>
        </div>
    );
}

export default Father;
